import React from 'react'
import { Homepage } from './homepage/Homepage'
import './KMHome.less'
import { Menu, Layout } from 'antd'
import { Plan } from './plan/Plan'
import { Goods } from './goods/Goods'
import { Resume } from './resume/Resume'
import ReactMouseParticles from 'react-mouse-particles'
import { MenuInfo } from 'src/type'
const { Header, Content } = Layout

interface IKMHomeState {
    current: string
}

export class KMHome extends React.Component {
    public state: IKMHomeState = {
        current: '1'
    }

    public handleClick = (e: MenuInfo) => {
        console.log(this)
        console.log('click ', e)
        this.setState({
            current: e.key
        })
    }

    public render() {
        const { current } = this.state
        // 将页面抽取到一个数组中,指定 key 优化循环性能
        const pages = [
            undefined,
            <Homepage key="1" />,
            <Plan key="2" />,
            <Goods key="3" />,
            <Resume key="4" />
        ]
        // 类型需要强制设置为 React.Component 不然报错
        const MouseParticles: typeof React.Component = ReactMouseParticles as any
        return (
            <Layout className="layout">
                <Header>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        onClick={this.handleClick}
                        selectedKeys={[current]}
                    >
                        <Menu.Item key="1">主页</Menu.Item>
                        <Menu.Item key="2">计划</Menu.Item>
                        <Menu.Item key="3">物品</Menu.Item>
                        <Menu.Item key="4">个人简历</Menu.Item>
                    </Menu>
                </Header>
                <Content style={{ padding: '0 50px' }}>{pages[Number(current)]}</Content>
                {/* g重力 num每帧粒子数 radius半径 life持续时间 color颜色，可以取值 “random” 或者颜色数组  */}
                <MouseParticles
                    g={1}
                    num={1}
                    radius={12}
                    life={0.8}
                    color={[
                        '#19CAAD',
                        '#8CC7B5',
                        '#A0EEE1',
                        '#BEE7E9',
                        '#BEEDC7',
                        '#D6D5B7',
                        '#D1BA74',
                        '#E6CEAC',
                        '#ECAD9E',
                        '#F4606C'
                    ]}
                />
            </Layout>
        )
    }
}
